<template>
    <view class="w-full">
        <view
            class="px-[18rpx] border border-solid border-lightc border-light rounded-[10rpx] h-[100rpx] items-center flex">
            <input class="flex-1" v-model="formData.username" type="text" placeholder="输入账号/手机号"
                placeholder-style="color:#c9c9cb" @confirm="" />
        </view>
        <view
            class="px-[18rpx]  border border-solid border-light rounded-[10rpx] flex h-[100rpx] items-center mt-[40rpx]">
            <input class="flex-1" placeholder-class="text" :password="showPassword" v-model="formData.password"
                type="text" placeholder="输入密码" placeholder-style="color:#c9c9cb" @confirm="" />
            <uni-icons @click="changShowPassword" :type="showPassword ? 'eye-slash' : 'eye'" size="24" />
            <navigator url="/pages/forget_pwd/forget_pwd" hover-class="none">
                <view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3">
                    忘记密码？
                </view>
            </navigator>
        </view>
        <privacy-vue class="mt-[40rpx]" v-if="isOpenAgreement" v-model:is-read="isReadAgreement"></privacy-vue>
        <button class="bg-[#d3a5ff] text-white mt-[60rpx]" @click="handleLogin">登录</button>
        <view class="flex justify-between line-clamp-6 mt-[30rpx] text-base">
            <view v-if="appStore.getLoginConfig.loginWay.includes(LoginWayEnum.SMS)">
                已有账号，使用
                <text class="text-primary display-inline-block" @click="handleSwitchCodeLogin">
                    验证码登录
                </text>
            </view>
            <text @click="toRegisterPage">
                注册账号
            </text>
        </view>
    </view>
    <modal-agreement-vue ref="modalAgreementRef" @confirm="handleModalConfirm"></modal-agreement-vue>
</template>
<script lang="ts" setup>
import PrivacyVue from "./privacy.vue"
import { LoginWayEnum } from "@/enums/appEnums"
import modalAgreementVue from "./modalAgreement.vue"
import { useAppStore } from "@/store/modules/app"
import { useLogin } from "./useLogin"
defineOptions({
    name: 'account'
})
const formData = ref({
    username: 'a123456',
    password: '123456',
    scene: LoginWayEnum.ACCOUNT
})
const { toPrePage, login } = useLogin({
    accountLoginFormData: formData.value,
})
const appStore = useAppStore()
const isOpenAgreement = computed(() => appStore.getLoginConfig.openAgreement === 1)
const isReadAgreement = ref(false)
const modalAgreementRef = ref<InstanceType<typeof modalAgreementVue>>()
const showPassword = ref(true)
// 切换验证码登录
function handleSwitchCodeLogin() {
    appStore.setCurrentLoginWay(LoginWayEnum.SMS)
}
// 登录
async function handleLogin() {
    if (!isReadAgreement.value && isOpenAgreement.value) {
        modalAgreementRef.value?.open()
        return
    }
    await login(LoginWayEnum.ACCOUNT)
}
// 隐私协议确认
function handleModalConfirm() {
    isReadAgreement.value = true
}
// 跳转注册页
function toRegisterPage() {
    uni.navigateTo({
        url: '/pages/register/index'
    })
}
// 切换密码显示
function changShowPassword() {
    showPassword.value = !showPassword.value
}
</script>
<style lang="scss" scoped></style>